<template>
	<view>
		<view class="box" style="display: flex;">
			<view class="zuo" style="width: 200rpx;background-color: #f4f4f4;">
				<view>
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll" style="height:85.9vh">
						<view
							id="demo3"
							style="width: 100%;height: 100rpx;font-size: 30rpx;font-weight: 900;text-align: center;line-height: 100rpx;margin: 90rpx 0rpx;"
							v-for="(item, index) in list"
							:key="index"
							:class="[active == index ? 'border' : '']"
							@click="act(index)"
						>
							{{ item.name }}
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="you" style="padding-top: 100rpx;display: flex;justify-content: space-around;flex-wrap: wrap;flex: 1;box-sizing: border-box;">
				<view
					style="width: 200rpx;height: 80rpx;text-align: center;line-height: 80rpx;border-radius: 50rpx;border: 1rpx solid #ccc;"
					v-for="(item, index) in list[active].labelList"
					@click="goList(index+1,item.id)"
				>
					{{ item.name }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import api from '@/api/api.js';
export default {
	data() {
		return {
			scrollTop: 0,
			old: {
				scrollTop: 0
			},
			list: [
				{labelList:[]}
			],
			active: 0
		};
	},
	onLoad() {
		this.getlist();
	},
	methods: {
		act(e) {
			this.active = e;
		},
		upper: function(e) {},
		lower: function(e) {},
		scroll: function(e) {
			this.old.scrollTop = e.detail.scrollTop;
		},
		goTop: function(e) {
			this.scrollTop = this.old.scrollTop;
			this.$nextTick(() => {
				this.scrollTop = 0;
			});
			uni.showToast({
				icon: 'none',
				title: '纵向滚动 scrollTop 值已被修改为 0'
			});
		},
		async getlist() {
			const { data } = await api.getnav();
			console.log(data);
			this.list = data;
		},
		goList(index,id) {
			uni.navigateTo({
				url: '../listT/list?id='+id+"&index="+index+"&act="+this.active
			});
		}
	}
};
</script>

<style lang="scss">
.border {
	animation: tab 10s linear forwards;
}
@keyframes tab {
	from {
		height: 50rpx;
		line-height: 50rpx;
		border-left: 4rpx solid red;
	}
	to {
		height: 50rpx;
		line-height: 50rpx;
		border-left: 4rpx solid red;
	}
}
</style>
